<template>
  <view class="wrapper">
    <view class="bgc">
      <image src="/src/static/images/kfbgc.a998ef53.png" />
    </view>
    <view class="nav-back">
      <u-icon name="arrow-left" size="18" />
    </view>
    <view class="content">
      <view class="box">
        <view class="nav">
          <view class="nav_a" :class="cur === 1 ? 'avtive' : ''" @click="cur = 1">操作问题</view>
          <view class="nav_a" :class="cur === 2 ? 'avtive' : ''" @click="cur = 2">支付问题</view>
        </view>
        <view class="problem">
          <view class="list" @click="navigateTo()">
            <view>{{ cur === 1 ? '操作' : '支付' }}问题帮助</view>
            <view>
              <u-icon name="arrow-right" size="18" />
            </view>
          </view>
        </view>
      </view>
      <view class="sub">召唤人工</view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  const cur = ref(1);

  function navigateTo() {
    if (cur.value === 1) {
      uni.navigateTo({
        url: '/pages/msgDetail/index?type=1&id=2',
      });
    } else if (cur.value === 2) {
      uni.navigateTo({
        url: '/pages/msgDetail/index?type=1&id=3',
      });
    }
  }
</script>
<style lang="scss" scoped>
  .wrapper {
    min-height: 100%;
    overflow-y: auto;
    background-color: #f4f5f7;
    padding-bottom: 20px;
    .bgc {
      image {
        width: 100%;
        height: 238px;
      }
    }
    .nav-back{
      width: 100%;
      height: 55px;
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 0 0 20px;
      line-height: 55px;
      display: none;
    }
    .content {
      padding: 0 4%;
      position: relative;
      margin-top: -79px;
      .box {
        background: #fff;
        border-radius: 7px;
        .nav {
          display: flex;
          justify-content: space-around;
          align-items: center;
          white-space: nowrap;
          height: 50px;
          overflow-x: auto;
          .nav_a {
            position: relative;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            color: #323232;
            padding: 0 15px 0 10px;
          }
          .avtive {
            color: #323232;
            font-weight: 600;
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
              width: 29px;
              height: 2px;
              background: #2b366e;
            }
          }
        }
        .problem {
          padding: 0 10px;
          .list {
            height: 55px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            &:last-child {
              border-bottom: none;
            }
            view {
              font-size: 14px;
              color: #323232;
              &:first-child {
                width: 90%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
      .sub {
        margin-top: 50px;
        width: 100%;
        height: 45px;
        background: #224996;
        border-radius: 23px;
        text-align: center;
        line-height: 45px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #fff;
      }
    }
  }
</style>
